<template>
<div id="add_bank_first">
		<c-title :hide="false" text='添加银行卡'></c-title>
    <div class="bank-main">
      <div class="mes">请绑定持卡人本人的银行卡</div>
      <div class="bank-input bank-class flex-a-c" v-if="info.payer_name&&bank.length>0">
        <div class="bank-name">持卡人</div>
        <input type="text" disabled="true" v-model="info.payer_name"/>
      </div>
      <div class="bank-input flex-a-c" :class="info.payer_name&&bank.length>0?'bank-on':''">
        <div class="bank-name">卡号</div>
        <input type="number"  v-model="num" placeholder="请输入卡号"/>
      </div>
    </div>
    <div class="bank-btn"  @click="next()" :style="iPnoneBottomBol ? 'bottom: 34px;' : ''">
      <van-button type="primary" color="var(--themeBaseColor)" style="width:100%;border-radius: 21px;">下一步</van-button>
    </div>
	</div>
</template>
<script>
import add_bank_first_controller from "./add_bank_first_controller";
export default add_bank_first_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pcStyle #add_bank_first .bank-btn {
  position: fixed;
  width: 375px;
  left:50%;
  bottom: 0;
  transform: translate(-50%, 0%);
  margin: 0 auto;
}
#add_bank_first {
  height: 100vh;
  // background-color: #fff;

  .bank-main {
    .mes {
      font-weight: 500;
      font-size: 0.875rem;
      color: #00001C;
      padding:0.875rem 0 0.875rem 0.75rem;
      text-align: left;
    }
    .bank-input {
      margin:0 0.75rem 0rem 0.75rem ;
      background: #FFFFFF;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      padding: 1rem 0 1rem 0.75rem;
      
      .bank-name {
        font-size: 0.875rem;
        line-height: 0.875rem;
        color: #00001C;
        line-height: 1.5rem;
        width:20%;
        text-align: left;
      }
      input {
        flex: 1;
        border: none;
        outline: none;
        &::placeholder {
          color: #AAAAB3;
        }
        // text-indent: 26px;
      }
    }
    .bank-class {
      border-radius: 0.5rem 0.5rem 0 0;
    }
    .bank-on {
      border-radius:  0 0 0.5rem 0.5rem;
      position: relative;
      &::after {
        content:'';
        width:94%;
        background: #F0F0F1;
        height: 0.0625rem;
        position: absolute;
        top:0;
      }
    }
  }
  .bank-btn {
    background: #FFFFFF;
    box-shadow: 0rem 0 0.3125rem 0.0625rem #F5F5F5;
    border-radius: 0rem 0rem 0rem 0rem;
    position: fixed;
    bottom:0;
    left:0;
    width: 100%;
    padding:0.625rem 0.75rem;
  }
}
</style>
